<template>
  <div class="my-fans-wrapper">
    <p class="my-fans-radio">找到你的共振主播，发掘潜在粉丝群</p>
    <div class="search">
      <input v-model="anchorName" type="text" placeholder="请输入主播昵称">
      <div class="search-btn" @click="searchAnchor">
        <p class="fontSet"><i class="iconfont iconicon-sousu-copy"></i></p>
      </div>
      <!-- <p></p> -->
    </div>
    <div class="my-fans-category-wrapper">
      <div class="my-fans-platform">
        <div class="plat-left">平台 :</div>
        <ul class="plat-right">
          <li @click="platHandler(-1)">
            <span :class="{'all':platIndex===-1}">全部</span>
          </li>
          <li 
            @click="platHandler(index)"
            v-for="(plat,index) in platItem"
            :key="plat.id"      
          >
            <span :class="{'all':platIndex===index}">
              {{plat.name}}
            </span>
          </li>
        </ul>
      </div>
      <div class="my-fans-category">
        <div class="category-left">分类 :</div>
        <ul class="category-right clearFloat">
          <li  @click="categoryHandler(-1)">
            <span :class="{'all':curIndex===-1}" >全部</span>
          </li>
          <li 
            v-for="(cate,index) in categorys" 
            :key="cate.id"
            @click="categoryHandler(index)"
          >
            <span :class="{'all':curIndex===index}" >{{cate.name}}</span>
          </li>
          <!-- <li  @click="categoryHandler(-1)">
            <span :class="{'all':curIndex===-1}" >全部</span>
          </li>
          <li 
            v-for="(cate,index) in categorys" 
            :key="cate.id"
            @click="categoryHandler(index)"
          >
            <span :class="{'all':curIndex===index}" >{{cate.name}}</span>
          </li> -->
        </ul>
      </div>
      <div class="my-fans-area" v-show="false">
        <div class="area-left">地区 :</div>
        <div class="area-right">
            <div class="province-left">
              <el-select v-model="province" class="province" @change="updateCity(province)" placeholder="请选择省份">
                <el-option
                  v-for="item in provinceData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="city-right">
              <el-select v-model="city" class="city" placeholder="请选择城市">
                <el-option
                  v-for="item in cityData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
        </div>
      </div>
    </div>
    <div class="ta-list-container">
      <ul class="ta-list-wrapper">
        <li class="ta-wrap-list one">
          <div class="ta-wrap-item anchor">主播</div>
          <div class="ta-wrap-item category">分类</div>
          <div class="ta-wrap-item fans">粉丝量</div>
          <div class="ta-wrap-item good">点赞总数</div>
          <div class="ta-wrap-item comment">评论总数</div>
          <div class="ta-wrap-item send">转发总数</div>
          <div class="ta-wrap-item dated">昨日涨粉数</div>
          <div class="ta-wrap-item match">与你匹配度</div>
          <div class="ta-wrap-item operation">操作</div>
        </li>
        <template v-if="tableData.length">
          <li class="ta-wrap-list two" v-for="(item,key) in tableData" :key="key">
              <div class="ta-wrap-item anchor">
                <div class="ta-wrap-img"><img v-lazy="item.headImg" :key="item.headImg"></div>
                <div class="ta-wrap-anchor" :title="item.nickName">
                  <div class="ta-wrap-v-img" v-show="item.isAuth == '1'">
                    <img src="~assets/images/v.png">
                    <!-- <i class="icon iconfont  iconv"></i> -->
                  </div>
                  <p class="text-ellipsis">{{item.nickName}}</p>
                  <!-- <p>{{nickname(key)}}</p> -->
                </div>
              </div>
              <div class="ta-wrap-item category"><p>{{item.typeName}}</p></div>
              <div class="ta-wrap-item fans"><p>{{item.fansNum}}</p></div>
              <div class="ta-wrap-item good"><p>{{item.pointsNum}}</p></div>
              <div class="ta-wrap-item comment"><p>{{item.commentsNum}}</p></div>
              <div class="ta-wrap-item send"><p>{{item.forwardNum}}</p></div>
              <div class="ta-wrap-item dated"><p>{{item.raiseFans}}</p></div>
              <div class="ta-wrap-item match"><p>{{item.mata}}%</p></div>
              <div class="ta-wrap-item operation">
              <!-- 这个query:{id:1}是未来传递给页面中主播详情的id,接收的是个动态值，现在只是写死了-->
                <div 
                  class="ta-operation-btn"
                  @click="connect(key,1)" 
                  :class="{'ta-o-active':index === key && oprIndex === 1}"
                  >详情
                </div>
                <div 
                  class="ta-operation-btn btn-slected"
                  @click="connect(key,2)" 
                  :class="{'ta-o-active':index === key && oprIndex === 2}"
                  >连麦
                </div>
              </div>
          </li>
        </template>
        <li class="no-wrap" v-else>暂无数据</li>
      </ul>
       <!-- <div class="pagination" v-show = "pageSize >= 8"> -->
      <div class="pagination"  v-show = "total > 0">
        <el-pagination
          background
          :current-page="pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[8,16,24]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setMyAddFans',0)
  },
  layout: "internalouts",
  data(){
    return{
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      index:0,  //控制操作按钮的状态切换
      oprIndex:null, //控制操作按钮的状态切换
      loading:false, //请求前的加载动画
      tableData: [], //主播列表数据
      categorys:[], //分类数据
      curIndex:-1,  //分类初始索引
      platIndex:-1, //平台初始索引
      platItem:[], //平台数据
      // 主播列表参数
      cityId:'', //市ID
      platformId:'', //平台ID
      typeId:'', //类型ID
      anchorId:'', //主播ID,暂时设置为1
      province:'', // 绑定更新省的id数据时触发
      // 地址获取参数
      provinceData:[],  //省的数据
      cityData:[], //市的数据
      city:'', // 绑定更新市的数据时触发
      pageNum:1, //第一页
			pageSize:8, //每页的条数
      total:0, //总条数
      loading:false, //页面加载效果
      anchorName:'', //搜索主播名称和主播ID
    }
  },
  created(){

  },
  computed:{

  },
  mounted(){
    this.platCate() //页面初始化(平台，类型数据)  
  // this.addressList() //页面初始化地址获取
    this.anchorList() //页面初始化主播列表
  },
  methods:{  
    titleStyleA(){
      return "background:#f8f9fb;text-align:center"
    },
    titleStyle(){
      return "text-align:center;height:60px"
    },
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.anchorList(); //调用主播列表接口
      this.$scrollTo();
      // this.newGuide()
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.anchorList();//调用主播列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.anchorList();//调用主播列表接口
       this.$scrollTo();
    },
    searchAnchor(){ //查询主播昵称
      this.pageNum = 1; //重新请求第一页
      this.anchorList(); //调用主播列表接口
    },
    categoryHandler(index){ //点击分类切换的
      if(index === -1) {
        this.typeId = '';
      } else {
        this.typeId = this.categorys[index].id;
      }
      this.curIndex=index;
      this.pageNum = 1;
      this.anchorList();
    },
    platHandler(index){ //点击平台切换的
      if(index === -1) {
        this.platformId = '';
      } else {
        this.platformId = this.platItem[index].id;
      }
      this.pageNum = 1;
      this.platIndex=index;
      this.anchorList();
    },
    connect(key,index){//详情连麦跳转 key代表列表的索引,index代表着切换按钮的索引
      this.index =key;
      this.oprIndex =index;
      if(index == 1){
        const {href} = this.$router.resolve({
          path:'/connect',
          query:{id:this.tableData[key].id}
        })
        window.open(href, '_blank')
      }else if(index == 2){
        //未来需要放开，因为接口参数没有
        // this.$router.push('/myAddFans/newtask')
        // this.$router.push({
        //   path:'/myAddFans/newtask',
        //   query:{
        //     name:this.tableData[key].nickName,
        //     anchorId:this.tableData[key].id
        //   }
        // })
      }
    },
    updateCity(province){
      this.province = province
      // this.addressList() //调用地址的接口
    },
    addressList(){ //连麦涨粉-地址获取
      // this.loading = true;    
      let params ={
        parentId:this.province == '' ? 0 : this.province, //父级Id(顶级传0)
      }
      // const data = this.province == 0 ? 'provinceData' : 'cityData'
      this.$axios.$post('addressList',params).then(res => {
        this.loading = false;    
        if(res.status === 200 ){
          // this[data] = res.obj
          if(this.province == ''){
            //初始化
            // this.province = res.obj[0].id //把id设置给this.province，和:value="item.id" 保持一致
            this.provinceData = res.obj;
          }else{
            this.cityData =  res.obj;
            this.city = res.obj[0].id //把id设置给this.city, 和:value="item.id" 保持一致
            //主播 
            this.pageNum = 1; //重新请求第一页
            this.anchorList(); //调用主播列表
          }
        }else{  
          if(this.test){
            this.test.close()
          }
          this.test = this.$message.warning(res.msg)
        }
      })
        .catch(error => {
          this.$message.warning('请求失败')
        })
    },
    anchorList(){ //连麦涨粉-主播列表
      // this.loading = true;    
      let params ={
        cityId:this.cityId, //市ID
        provinceId:this.province, //省ID
        platformId:this.platformId, //平台ID
        typeId:this.typeId, //类型ID
        pageSize:this.pageSize, //页面大小(默认10)
        pageNum:this.pageNum,//页码(默认1)
        anchorName:this.anchorName, //主播昵称
      }
      this.$axios.$post('anchorList',params).then(res => {
        // this.loading = false;         
        if(res.status === 200 ){
          this.tableData = res.obj.list;
          this.total = res.obj.total;
          // this.anchorId = res.obj.list.id //拿到主播ID，未来传给主播详情页
        }else{
          if(this.test){
            this.test.close()
          }
          this.test = this.$message.warning(res.msg)
        }
      })
      .catch(error => {
         this.$message.warning('请求失败');
        //  this.loading = false;
      })
    },
    platCate(){ //连麦涨粉-初始化(平台，类型数据)
      this.loading = true;
			let params ={
			}
			this.$axios.$post('raiseFansInit',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.platItem = res.obj.platformList; //平台数据
          this.categorys = res.obj.anchorTypeList; //分类数据
        }else{
          if(this.test){
            this.test.close()
          }
          this.test = this.$message.warning(res.msg)
        }
			})
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
		}
  },
}
</script>

<style scoped>
	.my-fans-wrapper{
    padding:0 20px 20px;
    background:#ffffff;
    font-size:14px;
    font-weight:400;
    position:relative;
	}
	.my-fans-radio{
    color:#333333;
    height:51px;
    line-height:58px;
    font-size:18px;
    border-bottom:1px solid #f4f4f4;
    font-weight:bold;
  }
  .search{
    margin:20px 20px 20px 0;
    height:30px;
    display:flex;
  }
  .search input{
    width:254px;
    border:1px solid #e1e1e1;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-sizing:border-box;
    text-indent: 12px;
  }
  .search input:focus{
    border:1px solid #0096e6;
  }
  .search-btn{
    width:40px;
    height:30px;
    border:1px solid #0096e6;
    box-sizing: border-box;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    /* background:#0096e6 url(~assets/images/search-logo.png) no-repeat center center; */
    /* background-size:18px 18px; */
    background:#0096e6;
    cursor: pointer;
    user-select: none;
  }
  .search-btn p.fontSet{
    width:40px;
    height:30px;
    line-height:30px;
    text-align:center;
  }
  p.fontSet i{
    color:#ffffff;
    font-size:18px;
  }
  .search-btn:hover{
    background-color:#66B1FF;
  }
	.my-fans-platform{
    display:flex;
    height:24px;
    cursor:pointer;
    flex-wrap: wrap;
	}
	.active{
    width:60px;
    height:24px;
    color:#0096e6;
    line-height:24px;
    text-align: center;
    font-weight:400;
    border-radius:4px;
	}
	ul.plat-right,.ul.category-right{
    display:flex;
    align-items: center;
  }
  ul.plat-right>li{
    margin-right:17px;
    margin-bottom:12px;
    float:left;
  }
  ul.category-right{
    margin-bottom:8px;
  }
  ul.category-right>li{
    margin-right:17px;
    margin-bottom:12px;
    float:left;
  }
  ul.plat-right>li>span,ul.category-right>li>span{
    padding:4px 15px;
  }
  .my-fans-category-wrapper{
    color:#666666;
    margin-top:29px;
  }
  .my-fans-category{
    display:flex;
    margin-top:24px;
    line-height:24px;
    cursor: pointer;
	}
  .all{
    background:#f0f9fe;
    color:#0096e6;
    font-weight: bold;
  }
  .category-left,.plat-left{
    white-space: nowrap;
    margin-right: 16px;
  }
	.my-fans-area{
    display:flex;
    align-items:center;
	}
	.area-left{
    margin-right:16px;
	}
	.area-right{
    display:flex;
    align-items:center;
	}
	.province{
    height:24px;
    line-height: 24px;
    margin-right:10px;
	}
	.city{
    height:24px;
	}
  .city-right{
    margin-left:10px;
  }
/* 粉丝列表 */
  /* .ta-list-container{
    margin-top:30px;
  } */
  .ta-list-wrapper{
    font-weight:bold;
    color:#666666;
  }
  .ta-list-wrapper .one{
    height:37px;
    color:#333333;
  }
  .ta-list-wrapper .two{
    height:62px;
  }
  .ta-wrap-list{
    display:flex;
    align-items:center;
    text-align:center;
  }
  .ta-wrap-anchor>.ta-wrap-v-img{
    display:inline-block;
    width:18px;;
    height:18px;
    margin-right:5px;
  }
  .ta-wrap-anchor>.ta-wrap-v-img i{
    font-size:18px;
    color:#FDE33E;
  }
  .ta-wrap-list:nth-child(odd){
    background:#f8f9fb;
  }
  .ta-wrap-list{
    white-space: nowrap;
  }
  .ta-wrap-list .anchor{
    width:17.79%;
  }
  .ta-wrap-list .category{
    width:12.45%;
    white-space:nowrap;
  }
  .ta-wrap-list .fans{
    width:9.76%;
  }
  .ta-wrap-list .good{
    width:9.76%;
  }
  .ta-wrap-list .comment{
    width:9.76%;
  }
  .ta-wrap-list .send{
    width:9.76%;
  }
  .ta-wrap-list .dated{
    width:10.91%;
  }
  .ta-wrap-list .match{
    width:9.48%;
  }
  .ta-wrap-list .operation{
    width:13.79%;
  }
	.ta-wrap-img{
    width:44px;
    height:44px;
    border-radius:50%;
    margin-right:12px;
    overflow: hidden;
	}
	.ta-wrap-img img{
    width:100%;
    height:100%;
	}	
	.ta-wrap-item{
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
	}
  .ta-wrap-item div.ta-wrap-anchor{
    width:55%;
    display:flex;
  }
  p{
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 18px;
  }
  .ta-wrap-anchor p.text-ellipsis{
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 18px;
    text-align: left;
    width:100%;
  }
  .ta-wrap-list .operation .ta-operation-btn{
    width: 70px;
    height: 28px;
    background:#f0f9fe;
    color:#0096e6;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
  }
  .ta-wrap-list .operation .ta-operation-btn:hover{
    color:#ffffff;
    background:#0096e6
  }
  .ta-wrap-list .operation .ta-o-active{
    color:#ffffff;
    background:#0096e6
  } 
  .ta-operation-btn:nth-child(2){
    margin-left:10px;
  }
  /* table表格的暂无数据 */
  .no-wrap{
    height:60px;
    line-height: 60px;
    text-align:center;
    font-size: 14px;
    color: #909399;
    border:1px solid #EBEEF5 ;
    margin-bottom:20px;
    font-weight:normal;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
  /* 修改elementUI样式 */
  /deep/ .el-input__inner {
    width:100%;
    height:24px;
    padding:6px 13px;
    width:100%;
  }
  /deep/ .el-input__icon{
    height: 24px;
    line-height:24px;
  }
  .my-fans-table-wrapper{
    margin-top:30px;
  }
  /deep/ .el-table_2_column_6.is-leaf .cell{
    padding:0;
  }
  .city-right /deep/ .el-input--suffix{
    width:170px;
  }
  .province-left /deep/ .el-input--suffix{
    width:170px;
  }
</style>
